<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">详情</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <!-- <div class="addtitle">出租经营</div> -->
            <!-- 出租经营表格 -->
            <div style="width: 90%; margin: auto">
                <table class="table-1">
                    <tr>
                        <td colspan="4" style="font-weight: 700; padding: 10px; font-size: 20px">合同详情</td>
                    </tr>
                    <!-- 三行三列的表格 -->
                    <tr v-if="rawData">
                        <td style="text-align: right; font-weight: 700; color: #000">房屋地址:</td>
                        <td colspan="3">
                            <p v-for="line in formattedData" :key="line">{{ line }}</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">合同名称:</td>
                        <td style="width: 298.59px">
                            {{ detailform.htmc }}
                        </td>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">合同类型:</td>
                        <td style="width: 298.59px">
                            {{ detailform.htlx }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">甲方:</td>
                        <td colspan="3">
                            {{ detailform.jf }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">乙方:</td>
                        <td colspan="3">
                            {{ detailform.yf }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">丙方:</td>
                        <td colspan="3">
                            {{ detailform.bf }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">收支情况:</td>
                        <td style="width: 298.59px">
                            {{ detailform.szqk }}
                        </td>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">合同金额:</td>
                        <td style="width: 298.59px">
                            {{ detailform.htje }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">合同起始时间:</td>
                        <td style="width: 298.59px">
                            {{ detailform.htqssj ? detailform.htqssj.split(' ')[0] : '' }}
                        </td>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">合同到期时间:</td>
                        <td style="width: 298.59px">
                            {{ detailform.htdqsj ? detailform.htdqsj.split(' ')[0] : '' }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">合同签订时间:</td>
                        <td style="width: 298.59px">
                            {{ detailform.htqdsj ? detailform.htqdsj.split(' ')[0] : '' }}
                        </td>
                        <td style="text-align: right; width: 126.91px; font-weight: 700; color: #000">合同编号:</td>
                        <td style="width: 298.59px">
                            {{ detailform.htbh ? detailform.htbh : '' }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: right; font-weight: 700; color: #000">
                            <div style="width: 130px">中心党委会纪要编号:</div>
                        </td>
                        <td colspan="3">
                            {{ detailform.jybh ? detailform.jybh : '' }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa" v-if="detailform.htje > 6000">
                        <td style="text-align: right; font-weight: 700; color: #000">采购申请单:</td>
                        <td colspan="3">
                            <el-table :data="yjhttableData" style="width: 100%" border max-height="150">
                                <el-table-column prop="name" label="文件名称" align="center" :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column prop="name" label="文件预览" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <router-link
                                            target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.id, type: scope.row.suffix } }"
                                            style="color: #008a94"
                                            v-if="
                                                scope.row.suffix == '.docx' ||
                                                scope.row.suffix == '.doc' ||
                                                scope.row.suffix == '.xls' ||
                                                scope.row.suffix == '.xlsx'
                                            "
                                            >{{ scope.row.name }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="redownload(scope.row.id, scope.row.name, scope.row.suffix)"
                                            v-else
                                            >{{ scope.row.name }}<i class="el-icon-document el-icon--right"></i
                                        ></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="文件下载" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="downloadfile(scope.row.id, scope.row.name, scope.row.suffix)"
                                            style="color: blue; text-decoration: underline"
                                            >{{ scope.row.name }}</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <el-table :data="fjlist" style="width: 100%" border max-height="150">
                                <el-table-column prop="name" label="文件名称" align="center"> </el-table-column>
                                <el-table-column prop="name" label="文件预览" align="center">
                                    <template slot-scope="scope">
                                        <router-link
                                            target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.id, type: scope.row.suffix } }"
                                            style="color: #008a94"
                                            v-if="
                                                scope.row.suffix == '.docx' ||
                                                scope.row.suffix == '.doc' ||
                                                scope.row.suffix == '.xls' ||
                                                scope.row.suffix == '.xlsx'
                                            "
                                            >{{ scope.row.name }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="redownload(scope.row.id, scope.row.name, scope.row.suffix)"
                                            v-else
                                            >{{ scope.row.name }}<i class="el-icon-document el-icon--right"></i
                                        ></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wjmc" label="文件下载" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="downloadfile(scope.row.id, scope.row.name, scope.row.suffix)"
                                            style="color: blue; text-decoration: underline"
                                            >{{ scope.row.name }}</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </td>
                    </tr>
                    <tr>
                        <td
                            colspan="4"
                            style="
                                font-weight: 700;
                                padding: 10px 10px 10px 20px;
                                font-size: 14px;
                                color: #0000ff;
                                background: #f6eed9;
                                text-align: left;
                                box-sizing: border-box;
                            "
                        >
                            <span style="margin-left: 20px">{{ '合同金额：' + detailform.htje + '元' }}</span>
                            <span style="margin-left: 20px">{{
                                detailform.szqk == '收入' ? '已收：' + detailform.ysje + '元' : '已付：' + detailform.ysje + '元'
                            }}</span>
                            <span style="margin-left: 20px">{{
                                detailform.szqk == '收入' ? '未付：' + jqje + '元' : '未付：' + jqje + '元'
                            }}</span>
                            <!-- <span style="margin-left: 20px">{{
                                detailform.szqk == '收入' ? '尚欠款：' + jqje + '元' : '尚欠款：' + jqje + '元'
                            }}</span> -->
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right; font-weight: 700; color: #000">收支信息:</td>
                        <td colspan="3">
                            <el-table :data="szlrtable" style="width: 100%" border>
                                <el-table-column prop="szrq" label="收支日期" align="center">
                                    <template slot-scope="scope">
                                        {{ scope.row.szrq ? scope.row.szrq.split(' ')[0] : '' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="sfknr" label="收（付）款内容" align="center" width="120"> </el-table-column>
                                <el-table-column prop="sfkje" label="收（付）款金额" align="center" width="120"> </el-table-column>
                                <el-table-column prop="pzh" label="凭证号" align="center"> </el-table-column>
                                <el-table-column prop="sfklb" label="收付款类别" align="center"> </el-table-column>
                                <el-table-column prop="qkr" label="请款人" align="center"> </el-table-column>
                                <el-table-column prop="qrzt" label="确认状态" align="center">
                                    <template slot-scope="scope">
                                        {{
                                            scope.row.qrzt == '0'
                                                ? '未确认'
                                                : scope.row.qrzt == '1'
                                                ? '同意'
                                                : scope.row.qrzt == '2'
                                                ? '不同意'
                                                : ''
                                        }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="bz" label="备注" align="center" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column label="操作" width="160" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="gotodetail(scope.row.id)">详情</el-button>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="gotodetailadd(scope.row.id)"
                                            v-if="scope.row.qrzt == '0'"
                                            >收支确认</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import {
    othersdetails,
    bacasedetails,
    download,
    caselist,
    lccheck,
    buildlist,
    getbuilddetailbydabh,
    dbnum,
    redownload,
    szlrlist
} from '@/api/index';
import fileType from '../vo/filetype';
import valueList from '@/components/common/valueList.vue';
import global from '@/components/common/httpurl.vue';
export default {
    name: 'zxgzend',
    data() {
        return {
            rawData: '',
            fjlist: [],
            activeName: 'first',
            options: [], //测试
            yjlxlist: valueList.yjlxlist, //是否列表
            yjdeepcolor: null,
            yjshow: false, //文件弹框
            yjform: {}, //文件表单
            jgxslist: valueList.jgxslist,
            qslist: valueList.qslist,
            fwytlist: valueList.fwytlist,
            cblist: valueList.cblist,
            cqdwlist: valueList.cqdwlist,
            sflist: valueList.sflist, //是否列表
            pzlist: valueList.pzlist, //票据
            myHeaders: {
                token: localStorage.getItem('token')
            },
            filefileList: [],
            httpUrl: global.httpUrl, //公共地址
            form: {
                clyj: '', //处理意见
                id: '',
                nextnodeid: '', //选择下一步节点id
                selectuser: '', //下一步选择用户id
                zt: 1 //通过驳回 0：驳回 1：通过
            },
            tjform: {},
            detailform: {}, //获取详情数据
            projectdetail: {},
            fileList: [],
            fileType: fileType,
            tableData: [],
            yjtableData: [],
            filetable: [], //文件列表
            total: 0,
            current: 1,
            pageSize: 10,
            xcnr: [],
            yjlist: [
                '同意',
                '不同意',
                '同意，请认真办理！',
                '不同意，请认真复核！',
                '拟同意，请领导批示！',
                '请办公室盖章！',
                '已盖章',
                '已办理，请归档！'
            ],
            fileLists: [], //文件列表
            czlist: [], //操作列表
            sflists: [
                { name: '是', value: '1' },
                { name: '否', value: '0' }
            ], //是否
            userlist: [], //部门列表
            userlistht: [], //部门列表
            hqshow: false, //会签按钮显示隐藏,
            fileform: {
                caseid: '',
                pageSize: 100,
                current: 1
            },
            lzform: {
                cb: '',
                cqdw: '',
                create_name: '',
                create_name_id: '',
                create_time: '',
                current: 0,
                dabh: '',
                dscs: '',
                dxcs: '',
                fmjz: '',
                fwdz: '',
                fwjg: '',
                fwyt: '',
                fzrq: '',
                id: '',
                jdrq: '',
                jzmj: '',
                jzmja: '',
                jzmjb: '',
                jznd: '',
                jzxs: '',
                note: '',
                pageSize: 999,
                qs: '',
                qzlx: '',
                status_code: 0,
                tdsyqlx: '',
                tdsyqmj: '',
                update_name: '',
                update_name_id: '',
                update_time: '',
                yz: '',
                zlc: '',
                zsbh: '',
                zsxyl: '',
                gfdw: this.$store.getters.gfdw,
                fczt: '1'
            },
            lzlist: [], //楼幢列表,
            // 收支录入列表
            szlrform: {
                current: 1, //第几页 ,
                pageSize: 999, //每页数量 ,
                signid: '' //合同ID ,
            },
            szlrtable: [],
            jqje: 0,
            yjhttableData: []
        };
    },
    methods: {
        // 选中一个的值
        searchChangeitem(val) {
            console.log(val);
        },
        // 单选一个的测试
        searchChange() {
            if (this.options.length > 1) {
                this.options.splice(0, 1);
            }
        },
        // 点击获取人员列表
        getry(val) {
            this.userlist = val.userlist;
        },
        // 点击获取人员列表(回退)
        getryht(val) {
            console.log(val);
            this.userlistht = val.userlist;
        },
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.form.current = val;
            this.buildlist(this.form);
            console.log(val);
        },
        // 返回上一页
        backForm() {
            this.$router.go(-1);
        },
        // 楼幢详情
        othersdetails(data) {
            othersdetails(data).then((res) => {
                this.detailform = res.data; //全部数据
                if (this.detailform.ysje) {
                    this.jqje = this.detailform.htje - this.detailform.ysje;
                }
                this.rawData = res.data.fwdz?res.data.fwdz:'';
                console.log('fj', res.data.fj);
                this.fjlist = res.data.fj;
                this.yjhttableData = this.detailform.cgsqd;
            });
        },
        // (备案)详情
        bacasedetails(data) {
            bacasedetails(data).then((res) => {
                console.log('res', res);
                this.detailform = res.data; //全部数据
                this.projectdetail = res.data.processtableInfo; //已录入数据
                this.tableData = res.data.nodeList;
                this.fileform.caseid = res.data.id;
                this.form.id = res.data.id;
                this.caselist(this.fileform);
            });
        },
        // 流程文件列表
        caselist(data) {
            caselist(data).then((res) => {
                this.filetable = res.data;
                console.log('filelist', res);
            });
        },
        // 流程审批
        lccheck(data) {
            lccheck(data).then((res) => {
                if (res.code == 200) {
                    this.$message.success('审批通过');
                    let userid = this.$store.getters.userId;
                    this.dbnum(userid);
                    this.$router.go(-1);
                }
            });
        },
        // 待办数据
        dbnum(data) {
            dbnum(data).then((res) => {
                console.log('待办', res);
                this.$store.commit('handledbnum1', res.data.swnum);
                this.$store.commit('handledbnum2', res.data.gdnum);
                this.$store.commit('handledbnum4', res.data.wtswnum);
            });
        },
        // 下一步操作按钮
        nextstep() {
            var that = this;
            console.log(this.form);
            if (this.detailform.isstartend == 1) {
                this.form.processtableInfo = this.projectdetail;
                this.form.fileList = this.yjtableData;
            }
            // 先判断是否会签（会签不用选人员）
            if (this.detailform.ishq == 0) {
                // 判断是否是最后一个节点（最后一个节点不用选人员）
                if (that.detailform.isstartend == 2) {
                    that.lccheck(that.form);
                } else {
                    if (that.form.selectuser) {
                        that.lccheck(that.form);
                    } else {
                        that.$message.error('请选择人员！！！');
                    }
                }
            } else {
                this.form.nextnodeid = this.options.toString();
                this.lccheck(this.form);
                console.log(this.form);
            }
        },
        // 下一步回退
        nextstepht() {
            this.form.zt = 0;
            if (this.form.selectuser) {
                this.lccheck(this.form);
            } else {
                this.$message.error('请选择人员！！！');
            }
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id);
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            download(data).then((res) => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res);
            });
        },
        // 文件预览
        redownload(id, name, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            redownload(data).then((res) => {
                console.log(res);
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                window.open(url, '_blank');
            });
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList);
            this.fileLists = fileLists;
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file);
            console.log(fileList);
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists);
            this.fileLists = fileLists;
            this.$message.success('导入成功');
        },
        // 获取到每一个意见值
        getYjVal(val, i) {
            this.yjdeepcolor = i;
            console.log(val);
            this.form.clyj = val;
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 跳转文件
        gotoyaojian() {
            this.yjshow = true;
        },
        // 删除
        deleteRow(index, rows) {
            this.$confirm('确定删除此条文件吗？')
                .then(() => {
                    rows.splice(index, 1);
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 上传功能
        submitForm() {
            console.log('yjlx', this.yjform.yjlx);
            console.log('yjbz', this.yjform.yjbz);
            console.log('fileLists', this.fileLists);
            // 类型 suffix
            let yjlb = this.fileLists.map((res) => {
                return {
                    caseid: '', // 流程实例id ,
                    create_name: '', //创建人 ,
                    create_name_id: '', //创建人id ,
                    create_time: '', //创建时间 ,
                    fj: res.response.data.id, //附件
                    id: '', // id ,
                    status_code: '1', // 1正常 2删除 ,
                    update_name: '', // 修改人 ,
                    update_name_id: '', //修改人id ,
                    update_time: '', //修改时间 ,
                    wjmc: res.response.data.filename, //文件名称 ,
                    yjbz: this.yjform.yjbz, //文件名称 ,
                    yjlx: this.yjform.yjlx //文件类型
                };
            });
            console.log('yjlb', yjlb);
            this.yjtableData = this.yjtableData.concat(yjlb);
            this.yjform.yjlx = null;
            this.yjform.yjbz = null;
            this.filefileList = [];
            this.fileLists = [];
        },
        // 选项卡
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 楼幢
        buildlist(data) {
            buildlist(data).then((res) => {
                if (res.code == 200) {
                    this.lzlist = res.data.records;
                } else {
                    this.lzlist = [];
                }
            });
        },
        // 获取楼幢信息
        getbuildval(val) {
            console.log('楼幢详情', val);
            let data = {
                dabh: val
            };
            getbuilddetailbydabh(data).then((res) => {
                console.log(res);
                this.form.processtableInfo.dabh = res.data.dabh;
                this.form.processtableInfo.fwzldw = res.data.fwzldw;
                this.form.processtableInfo.dz = res.data.fwdz;
                this.form.processtableInfo.fwyt = res.data.fwyt;
                this.form.processtableInfo.jzmj = res.data.jzmj;
                this.form.processtableInfo.buildid = res.data.id;
            });
        },
        // 获取当前年月日
        getNowDate() {
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            var date = now.getDate(); //得到日期
            var hour = ' 00:00:00'; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
            month = month + 1;
            month = month.toString().padStart(2, '0');
            date = date.toString().padStart(2, '0');
            this.tjform.htqdsj = `${year}-${month}-${date}`;
        },
        // 收支录入列表
        szlrlist(data) {
            szlrlist(data).then((res) => {
                this.szlrtable = res.data.records;
                console.log(res);
            });
        },
        // 跳转详情页面
        gotodetail(id) {
            let name = 'htgltydetail';
            this.$router.push({
                name: name,
                params: { id: id }
            });
        },
        // 跳转信息财务确认页面
        gotodetailadd(id) {
            let name = 'htgldetailcwqr';
            this.$router.push({
                name: name,
                query: { id: id }
            });
        }
    },
    computed: {
        formattedData() {
            return this.rawData.split(',').map((item) => item.trim());
        }
    },
    watch: {
        $route(to, from) {
            console.log('to',to)
            console.log('from',from)
            if (from.name == 'htgldetailcwqr'||from.name == 'qthtcwlist') {
                let data = {
                    id: to.query.id
                };
                this.othersdetails(data);
                this.szlrform.signid = to.query.id;
                this.szlrlist(this.szlrform);
                this.getNowDate();
            }
        }
    },
    created() {
        // this.buildlist(this.lzform)
        let data = {
            id: this.$route.query.id
        };
        this.othersdetails(data);
        this.szlrform.signid = this.$route.query.id;
        this.szlrlist(this.szlrform);
        this.getNowDate();
    }
};
</script>

<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>

<style scoped>
/* 选择意见 */
.xzyj {
    width: 48%;
    height: 110px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px 0;
    box-sizing: border-box;
}

.xzyj .xzyjitem {
    text-align: left;
    cursor: pointer;
    line-height: 24px;
}

table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    /*合并相邻表格的间距*/
}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}

.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008a94;
}

.detailcontent .detailitem2 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>